<template lang="pug">
  .chief
    .inner
      .h-logo
        img(src="static/image/z_logo.png" @click='$router.push({path:"/choosePage"})' style='cursor:pointer')
        span.h-title(@click='$router.push({path:"/choosePage"})' style='cursor:pointer') 布勒人参
      .personal
        span.back_btn(@click='back') &lt; 返回
        img(src="static/image/z_user.png" id="user")
        .h-user
          span(@click="detail()") {{name || "未登录"}}
          img(src="static/image/z_solidArrd.png" id="whirl" @click="detail()")
          .dropContent
            ul(@mouseleave='close')
              li(data-title="个人中心" @click="changePage('assetsss')") 个人中心
              li(data-title="种子余额" @click="changePage('ginsengBalance')") 种子余额
              li(data-title="我的资产" @click="changePage('assets')") 我的资产
              li(data-title="游戏日志" @click="changePage('gengseng_dugresult')") 挖参结果
              li(data-title="游戏日志" @click="changePage('seedginseng_gamelog')") 游戏日志
              li(data-title="退出" @click="closee") 退出

  //
</template>
<script>
import $ from "jquery";

export default {
  name: "chief",
  data() {
    return {
      name: ""
    };
  },
  computed: {},
  mounted() {
    this.setShadow();
    this.userchange();
  },
  methods: {
    back() {
      history.back();
    },
    userchange() {
      var that = this;
      var timer = setInterval(() => {
        if (u.getStore("user")) {
          that.name = u.getStore("user").name || '';
        }
      }, 10);
    },
    closee() {
      u.removeStore("user");
      this.$router.push({ path: "/login" });
      this.close();
      this.name = "未登录";
    },
    setShadow() {
      var path = location.pathname.split("/")[1];
      if (path === "assetsss") {
        $(".dropContent li:eq(0)").css({
          color: "#c7c7c7",
          background: 'url("../../static/image/chiefbtn2.png") no-repeat',
          "background-size": "100% 100%"
        });
      } else if (path === "ginsengBalance") {
        $(".dropContent li:eq(1)").css({
          color: "#c7c7c7",
          background: 'url("../../static/image/chiefbtn2.png") no-repeat',
          "background-size": "100% 100%"
        });
      } else if (path === "assets") {
        $(".dropContent li:eq(2)").css({
          color: "#c7c7c7",
          background: 'url("../../static/image/chiefbtn2.png") no-repeat',
          "background-size": "100% 100%"
        });
      }
    },
    detail() {
      $(this).toggleClass(function() {
        if ($("#whirl").hasClass("whirl1")) {
          $("#whirl")
            .removeClass("whirl1")
            .addClass("whirl2");
          document.getElementsByClassName("dropContent")[0].style.display =
            "none";
        } else {
          $("#whirl")
            .removeClass("whirl2")
            .addClass("whirl1");
          document.getElementsByClassName("dropContent")[0].style.display =
            "block";
        }
      });
    },
    changePage(pathname) {
      this.$router.push({ path: "/" + pathname });
      location.reload();
    },
    close() {
      document.getElementsByClassName("dropContent")[0].style.display = "none";
      $("#whirl")
        .removeClass("whirl1")
        .addClass("whirl2");
    }
  },
  components: {}
};
</script>
<style lang="stylus" scoped>
.whirl1 {
  animation: rotateBox1 0.5s linear;
  animation-fill-mode: forwards;

  @keyframes rotateBox1 {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(180deg);
    }
  }
}

.whirl2 {
  animation: rotateBox2 0.5s linear;
  animation-fill-mode: forwards;

  @keyframes rotateBox2 {
    from {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(0deg);
    }
  }
}

.chief {
  display: flex;
  align-items: center;
  width: 100%;
  height: 66px;
  background: white;

  .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    width: 100%;

    /* vertical-align middle */
    .h-logo {
      display: flex;
      align-items: center;

      .h-title {
        margin-left: 18px;
        font-size: 28px;
        color: #c7a062;
      }
    }

    .personal {
      display: flex;
      align-items: center;
      float: right;

      .back_btn {
        width: 70px;
        color: #c7a062;
        font-size: 16px;
      }

      #user {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .h-user {
        display: flex;
        align-items: center;
        position: relative;
        font-size: 14px;
        color: #1a1a1a;

        > span {
          margin: 0 10px;
          cursor: pointer;
        }

        #whirl {
          cursor: pointer;
        }

        .dropContent {
          display: none;
          padding: 10px;
          position: absolute;
          top: 37px;
          right: 0;
          width: 90px;
          min-height: 160px;
          text-align: center;
          background-image: url('../../static/image/dropbg.png');
          background-size: 100% 100%;
          z-index: 1000;

          ul {
            li {
              margin: 0 auto;
              margin-bottom: 5px;
              width: 100%;
              height: 24px;
              line-height: 22px;
              color: white;
              font-size: 6px;
              font-weight: bold;
              cursor: pointer;
              background: url('../../static/image/chiefbtn1.png') no-repeat;
              background-size: 100% 100%;
              position: relative;
              z-index: 0;
              &:last-child {
                margin-bottom: 0;
              }
              text-shadow: 0 1px #a56a2c, -1px 0 #a56a2c, -1.5px 0px #a56a2c, -2px 1px #a56a2c;
              &:active {
                color: #c7c7c7;
                background: url('../../static/image/chiefbtn2.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
